<template>
    <div class="page">
        <van-tabs v-model="active" :sticky="true">
            <van-tab title="已打卡">
                <div class="oa-tags van-hairline--bottom">
                    <oa-tag :active="tagIndex == 0" @click="tabFilter(0)">全部已打卡</oa-tag>
                    <oa-tag :active="tagIndex == 1" @click="tabFilter(1)">迟到</oa-tag>
                    <oa-tag :active="tagIndex == 2" @click="tabFilter(2)">外勤</oa-tag>
                </div>
                <div class="user-list" :style="{height: (screenHeight - 44 - 58)+'px'}">
                    <user-cell @click="goCalendar(item)" :key="`card-${index}`" v-for="(item,index) in cardFilter" :org-name="item.orgName"
                               :user-name="item.userName">{{item|showRightDetail}}</user-cell>
                </div>
            </van-tab>
            <van-tab title="未打卡">
                <div class="user-list no-tag" :style="{height:(screenHeight - 44) + 'px'}">
                    <user-cell  @click="goCalendar(item)" :key="`no-${index}`" v-for="(item,index) in not" :org-name="item.orgName"
                               :user-name="item.userName">{{item.notCard}}次</user-cell>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import service from "../apiNet";
    import OaTag from "../components/OaTag";
    import UserCell from "../components/UserCell";
    import dayjs from 'dayjs';


    export default {
        name: "DayCard",
        components: {UserCell, OaTag},
        data() {
            return {
                active: 0,
                tagIndex: 0,
                screenHeight: document.documentElement.clientHeight,
                list: [],
                not: [],
                card: [],
                cardFilter: []
            }
        },
        filters:{
            showRightDetail(value){
                if(value.late > 0){
                    return "迟到"
                }
                if(value.outDay > 0){
                    return "外勤"
                }
                return "正常打卡"
            }
        },
        methods: {
            goCalendar(item){
                this.$router.push({
                    path:"/detail/day/calendar",
                    query:{
                        userId:item.userid,
                        userName:item.userName,
                        date:dayjs().format('YYYY-M-D')
                    }
                })
            },
            tabFilter(value) {
                console.log(value)
                this.tagIndex = value
                this.filterCard()
            },
            filterCard() {

                if (this.tagIndex == 0) {
                    this.cardFilter = this.cardFilter.concat(this.card)
                } else if (this.tagIndex == 1) {
                    this.cardFilter = this.card.filter((item) => {
                        return item.late > 0
                    })
                } else {
                    this.cardFilter = this.card.filter(item => {
                        return item.outDay > 0
                    })
                }
            }
        },
        mounted() {
            if (this.$store.state.userList) {
                this.list = this.$store.state.userList;

                this.list.forEach(item => {
                    if (item.notCard > 0) {
                        this.not.push(item)
                    } else {
                        this.card.push(item)
                    }
                })
                this.filterCard()
            }
        }
    }
</script>

<style lang="less" scoped>


    .oa-tags {
        display: flex;
        background: #fff;
        flex-direction: row;
    }

    .user-list {
        overflow-y: auto;
    }


</style>